$colorPurple: #292B73
$colorYellow: #FFB637
=size($w,$h:$w)
  width: $w
  height: $h

=abCenter
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%,50%)
  
=flexCenter
  display: flex
  align-items: center
  justify-content: center
  
*
  // border: 1px solid black
  font-family: 'Noto Sans TC', sans-serif

html,body
  width: 100%
  height: 100%
  margin: 0
  // padding: 100px
  +flexCenter
  background-color: $colorPurple
body
  // padding: 100px
  
.panels
  width: 100%
  max-width: 900px
  display: flex
  background-color: white
  border-radius: 5px
  box-shadow: 0px 0px 30px rgba(black,0.2)
  position: relative
  z-index: 100
  .panel
    flex: 5
    padding: 30px
    &.yellow
      flex: 4
      background-color: $colorYellow
h1,h3
  text-align: center
  margin: 0
h1
  font-weight: 700
  margin-bottom: 30px
h3
  font-weight: 400
  
textarea
  width: 100%
  box-sizing: border-box
  padding: 10px
  font-size: 20px
  letter-spacing: 1px
  outline: none
  border: solid 2px rgba(black,0.3)  
  &:focus
    border-color: $colorPurple
  
.symbol
  font-size: 24px
  font-weight: 900
  padding: 0
  text-align: center
  
.buttons
  display: flex
  justify-content: center
  margin-top: 30px
button
  padding: 10px 20px
  border-radius: 0px
  font-size: 16px
  font-weight: 400
  letter-spacing: 3px
  margin: 6px
  border: none
  &.yellow
    background-color: $colorYellow
      color: white
  &.purple
    background-color: $colorPurple
    color: white
  &.white
    background-color: white
    border: solid 2px $colorPurple
    
//交換符號
.symbol
  font-size: 24px
  font-weight: 900
  padding: 0
  text-align: center
  
ul.translist
  // list-style: none
  display: flex
  flex-direction: column
  height: 450px
  flex-wrap: wrap
  
  
.decoration
  font-size: 500px
  font-weight: 900
  color: white
  position: absolute
  opacity: 0.4
.playlist
  text-align: center
  font-size: 20px
  letter-spacing: 2px
  .playing
    color: red
    font-size: 30px